<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框案例</title>

    <link rel="stylesheet" href="css/mpwx/base.css?18">
    <link rel="stylesheet" href="css/mpwx/lib.css?18">
    <link rel="stylesheet" href="css/mpwx/css2.css?18">
    <link rel="stylesheet" href="css/mpwx/index.ssss.css">
    <link rel="stylesheet" href="css/mpwx/tooltip.css">
    <link rel="stylesheet" href="css/mpwx/richvideo.css">
    <style>
        .modal-mask {
            position: fixed;
            z-index: 9998;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: table;
            transition: opacity .3s ease;
        }

        .modal-wrapper {
            display: table-cell;
            vertical-align: middle;
        }

        .modal-container {
            width: 300px;
            margin: 0px auto;
            padding: 20px 30px;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
            transition: all .3s ease;
            font-family: Helvetica, Arial, sans-serif;
        }

        .modal-header h3 {
            margin-top: 0;
            color: #42b983;
        }

        .modal-body {
            margin: 20px 0;
        }

        .modal-default-button {
            float: right;
        }

        /*
         * The following styles are auto-applied to elements with
         * transition="modal" when their visibility is toggled
         * by Vue.js.
         *
         * You can easily play with the modal transition by editing
         * these styles.
         */

        .modal-enter {
            opacity: 0;
        }

        .modal-leave-active {
            opacity: 0;
        }

        .modal-enter .modal-container,
        .modal-leave-active .modal-container {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

    </style>
</head>
<body>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
    <transition name="modal">
        <div class="modal-mask">
            <div v-if="datatype==2" class="dialog_wrp img_dialog_wrp"
                 style="width: 846px; margin-left: -423px; margin-top: -290px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>选择图片</h3>
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>

                    </div>
                    <div class="dialog_bd">
                        <div class="img_pick_panel inner_container_box side_l cell_layout">
                            <div class="inner_side">
                                <div class="group_list">
                                    <div class="inner_menu_box">
                                        <dl class="inner_menu js_group">
                                            <dd id="js_group0" class="inner_menu_item js_groupitem"
                                                :class="{ selected:selectedgroup == -1}"
                                                data-groupid="0">
                                                <a href="javascript:;" class="inner_menu_link" title="全部图片"
                                                   @click="changePicGroup(-1)">
                                                    <strong>全部图片</strong><em class="num">(<span>2</span>)</em>
                                                </a>
                                            </dd>

                                            <template v-for="(g,index) in groups">
                                                <dd class="inner_menu_item js_groupitem"
                                                    :class="{selected:selectedgroup==index}"
                                                    :data-groupid="g.id">
                                                    <a href="javascript:;" class="inner_menu_link" title="g.name"
                                                       @click="changePicGroup(index)">
                                                        <strong v-text="g.name"></strong><em class="num">(<span
                                                            v-text="g.count"></span>)</em>
                                                    </a>
                                                </dd>
                                            </template>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="inner_main">
                                <div class="img_pick_area">
                                    <div class="img_pick_area_inner">
                                        <div class="img_pick">
                                            <i class="icon_loading_small white js_loading" style="display: none;"></i>
                                            <ul class="group js_list img_list">
                                                <template v-for="(pic,index) in data">
                                                    <li class="img_item js_imageitem" data-id="100000003"
                                                        data-url="pic.src" data-oristatus="0" data-format="jpeg">
                                                        <label class="frm_checkbox_label img_item_bd "
                                                               @click="selectedVal = index"
                                                               :class="{selected:selectedVal == index}">
                                                            <div class="pic_box">
                                                                <img class="pic js_pic" data-src="pic.path"
                                                                     :src="pic.path" style="width: 117px;">
                                                            </div>
                                                            <span class="lbl_content" v-text="pic.fileName"></span>
                                                            <div class="selected_mask">
                                                                <div class="selected_mask_inner"></div>
                                                                <div class="selected_mask_icon"></div>
                                                            </div>
                                                        </label>
                                                    </li>
                                                </template>
                                            </ul>
                                        </div>
                                        <div id="js_pagebar" class="pagination_wrp pageNavigator">
                                            <div id="wxPagebar_1480578839079" class="pagination">
                                                <span class="page_nav_area">
                                                    <a href="javascript:void(0);" class="btn page_prev" @click="gotoPrevPage">
                                                        <i class="arrow"></i></a><span class="page_num"><label
                                                        v-text="currentPageIndex"></label><span class="num_gap">/</span><label v-text="pagecount"></label></span>
                                                    <a @click="gotoNextPage"  href="javascript:void(0);" class="btn page_next"><i
                                                        class="arrow"></i></a></span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <p class="dialog_ft_desc">已选<span class="js_selected">0</span>个，可选1个</p>
                        </div>
                    </div>

                    <div class="dialog_ft">

                        <span
                                :class="{btn_disabled:selectedVal <0}"
                                class="btn btn_primary btn_input js_btn_p"><button @click="confirmSelection"
                                                                                   type="button" class="js_btn"
                                                                                   data-index="0">确定</button></span>
                        <span class="btn btn_default btn_input js_btn_p"><button @click="$emit('close')" type="button"
                                                                                 class="js_btn"
                                                                                 data-index="1">取消</button></span>

                    </div>

                </div>
            </div>


            <!-- 图文消息选择框 -->

            <div class="dialog_wrp media align_edge" v-if="datatype==10 && data.length >0"
                 style="width: 960px; margin-left: -480px; margin-top: -313.5px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>选择素材</h3>
                        <!--#0001#-->
                        <a href="javascript:;"
                           @click="$emit('close')"
                           class="icon16_opr closed pop_closed">关闭</a>
                        <!--%0001%-->
                    </div>
                    <div class="dialog_bd">
                        <div class="dialog_media_container appmsg_media_dialog">
                            <div class="sub_title_bar in_dialog">
                                <div class="search_bar">
            <span class="frm_input_box search with_del append">
                <a class="del_btn dn" href="javascript:" id="searchCloseBt"><i class="icon_search_del"></i>&nbsp;</a>
                <a id="msgSearchBtn" href="javascript:"
                   @click="searchNews"
                   class="frm_input_append"><i class="icon16_common search_gray">搜索</i>&nbsp;</a>
                <input id="msgSearchInput" type="text" placeholder="标题/作者/摘要" v-model="keyword" class="frm_input">
            </span>
                                </div>
                                <div class="appmsg_create tr">
                                    <a class="btn btn_primary btn_add" href="${ctx}/material/news/editPage"
                                       target="iframe-tab-content">
                                        <i class="icon14_common add_white"></i>新建图文消息</a>
                                </div>
                            </div>
                            <div class="dialog_media_inner">

                                <div class="js_appmsg_list appmsg_list media_dialog">
                                    <div class="appmsg_col">
                                        <div class="inner">
                                            <template v-for="(item,index) in evenNumbersNews">
                                                <div :id="item.id">
                                                    <div
                                                            :class="{selected:selectedVal == item.id}"
                                                            class="appmsg single has_first_cover" :data-id="item.id"
                                                            @click="selectedVal = item.id"
                                                    >
                                                        <div class="appmsg_content">
                                                            <div class="appmsg_info">
                                                                <em class="appmsg_date" v-text="item.created"></em>
                                                            </div>
                                                            <div class="appmsg_item">
                                                                <h4 class="appmsg_title js_title">
                                                                    <a href="" target="_blank" v-text="item.title"></a>
                                                                </h4>
                                                                <div class="appmsg_thumb_wrp"
                                                                     :style="{'background-image':'url('+item.thumb_image_path+')'}">
                                                                </div>
                                                                <p class="appmsg_desc" v-text="item.digest"></p>
                                                                <a href="" class="edit_mask preview_mask js_preview">
                                                                    <div class="edit_mask_content">
                                                                        <p class="">预览文章</p>
                                                                    </div>
                                                                    <span class="vm_box"></span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="edit_mask appmsg_mask">
                                                            <i class="icon_card_selected">已选择</i>
                                                        </div>
                                                    </div>
                                                </div>

                                            </template>
                                        </div>
                                    </div>
                                    &nbsp;
                                    <div class="appmsg_col">
                                        <div class="inner">
                                            <template v-for="(item,index) in oddNumbersNews">
                                                <div :id="item.id">
                                                    <div
                                                            :class="{selected:selectedVal == item.id}"
                                                            class="appmsg single has_first_cover" :data-id="item.id"
                                                            @click="selectedVal = item.id">
                                                        <div class="appmsg_content">
                                                            <div class="appmsg_info">
                                                                <em class="appmsg_date" v-text="item.created"></em>
                                                            </div>
                                                            <div class="appmsg_item">
                                                                <h4 class="appmsg_title js_title">
                                                                    <a href="" target="_blank" v-text="item.title"></a>
                                                                </h4>
                                                                <div class="appmsg_thumb_wrp"
                                                                     :style="{'background-image':'url('+item.thumb_image_path+')'}">
                                                                </div>
                                                                <p class="appmsg_desc" v-text="item.digest"></p>
                                                                <a href="" class="edit_mask preview_mask js_preview">
                                                                    <div class="edit_mask_content">
                                                                        <p class="">预览文章</p>
                                                                    </div>
                                                                    <span class="vm_box"></span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="edit_mask appmsg_mask">
                                                            <i class="icon_card_selected">已选择</i>
                                                        </div>
                                                    </div>
                                                </div>

                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="pagination_wrp pageNavigator">
                                    <div class="pagination" id="wxPagebar_1484034072817">
                                <span class="page_nav_area">

                                    <a href="javascript:void(0);" class="btn page_prev" @click="gotoPrevPage"><i class="arrow"></i></a>
                                        <span class="page_num">
                                            <label v-text="currentPageIndex"></label>
                                            <span class="num_gap">/</span>
                                            <label v-text="pagecount"></label>
                                        </span>
                                    <a href="javascript:void(0);" class="btn page_next" @click="gotoNextPage"><i class="arrow"></i></a>

                                </span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="dialog_ft">

                        <span
                                :class="{btn_disabled:selectedVal <0}"
                                class="btn btn_primary btn_input js_btn_p">
                             <button type="button"
                               class="js_btn btn_confirm"
                               @click="confirmSelection">确定</button>
                        </span>
                        <span class="btn btn_default btn_input js_btn_p">
                            <button type="button" class="js_btn btn_cancel" @click="$emit('close')">取消</button>
                        </span>

                    </div>

                </div>
            </div>

            <!-- 声音选择窗口-->

            <div class="dialog_wrp align_edge audio_dialog"
                 v-if="datatype==3 && data.length >0"
                 style="width: 960px; margin-left: -480px; margin-top: -279.5px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>请选择语音</h3>
                        <!--#0001#-->
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>
                        <!--%0001%-->
                    </div>
                    <div class="dialog_bd">
                        <div class="audio_box">
                            <div class="global_mod audio_box_hd float_layout gap_top">
                                <p class="global_info gap_top_item tips_global jsAudioTips" style="display:none;">
                                    由于版本兼容的原因,你暂时只可以选择60秒内的语音发送</p>
                                <p class="global_extra">
                                    <a class="btn btn_primary btn_add jsPluginAudioNew" href="javascript:;"><i
                                            class="icon14_common add_white"></i>新建语音</a>
                                </p>
                            </div>
                            <div class="audio_box_bd audio_list_container">

                                <div class="media_list_tips_wrp tips_global" style="display:none;">
                                    <span class="tips">暂无素材</span>
                                    <span class="vm_box"></span>
                                </div>


                                <div class="media_list_tips_wrp" style="display:none;">
                                    <i class="icon_loading_small white">loading...</i>
                                    <span class="vm_box"></span>
                                </div>


                                <div class="audio_list jsPluginAudioList">
                                    <template v-for="(item,index) in data">

                                        <label
                                                @click="selectedVal = item.id"
                                                :class = "{selected:selectedVal == item.id}"
                                                class="frm_radio_label audio_item <!--disabled-->" :for="item.resourceId">
                                            <i class="icon_radio"></i>
                                            <span class="lbl_content">
                                            <span class="audio_meta audio_title">{{item.title}}</span>
                                            <span class="audio_meta audio_date">{{item.created}}</span>
                                            <span class="audio_meta audio_length">{{item.duration||formatSeconds}}</span>
                                            <span class="audio_meta audio_play jsPluginAudioPlay audio_default" id="pluginAudioPlay">
                                            <!--<div class="qqmusic_audio " id="wxAudioBox" data-aid="">
                                              <a class="audio_switch" href="javascript:;" onclick="return false;" title="点击播放">
                                                <i class="icon_qqmusic"></i>
                                              </a>
                                            </div>--></span>
                                        </span>
                                            <input type="radio" :data-label="item.title"
                                                   data-value="100000007" data-index="0"
                                                   class="frm_radio jsPluginAudioRadio" :id="item.resourceId">
                                        </label>
                                    </template>
                                </div>
                                <div class="pagination_wrp jsPluginAudioPage"><div class="pagination" id="wxPagebar_1484793389125">
                                    <span class="page_nav_area">
                                        <a href="javascript:void(0);" class="btn page_first" v-if="currentPageIndex ==1">首页</a>
                                        <a href="javascript:void(0);" @click="gotoPrevPage" class="btn page_prev" v-if="currentPageIndex > 1"><i class="arrow"></i></a>

                                            <span class="page_num">
                                                <label v-text="currentPageIndex"></label>
                                                <span class="num_gap">/</span>
                                                <label v-text="pagecount"></label>
                                            </span>

                                        <a href="javascript:void(0);" class="btn page_next" @click="gotoNextPage"><i class="arrow"></i></a>
                                        <a href="javascript:void(0);" class="btn page_last" v-if="currentPageIndex <pagecount">末页</a>
                                    </span>

                                                                   <!-- <span class="goto_area">
                                        <input type="text">
                                        <a href="javascript:void(0);" class="btn page_go">跳转</a>
                                    </span>-->
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="dialog_ft">

                        <span class="btn btn_primary btn_input js_btn_p">
                            <button type="button" class="js_btn" @click="confirmSelection"  data-index="0">确定</button>
                        </span>

                        <span class="btn btn_default btn_input js_btn_p">
                            <button type="button" class="js_btn"  data-index="1">取消</button></span>

                    </div>

                </div>
            </div>


            <!-- 视频素材选择弹窗 -->

            <div class="dialog_wrp dialog_select_video" v-if="datatype==15 && data.length >0"
                 style="width: 960px; margin-left: -480px; margin-top: -308px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>选择视频</h3>
                        <!--#0001#-->
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>
                        <!--%0001%-->
                    </div>
                    <div class="dialog_bd">
                        <div class="dialog_media_container">
                            <div class="sub_title_bar in_dialog">
                                <div class="title_tab js_videotab">
                                    <ul class="tab_navs title_tab" data-index="0">
                                        <li data-index="0" class="tab_nav first js_top selected" data-id="15"><a
                                                href="javascript:;">素材库</a></li>
                                    </ul>
                                </div>
                                <div class="search_bar dn">
                            <span class="frm_input_box search with_del append">
                                <a class="del_btn" href="javascript:"><i class="icon_search_del"></i>&nbsp;</a>
                                <a href="javascript:" class="frm_input_append"><i
                                        class="icon16_common search_gray">搜索</i>&nbsp;</a>
                                <input type="text" placeholder="关键字" value="" class="frm_input">
                            </span>
                                </div>
                                <div class="richvideo_create js_video_create">
                                    <a class="btn btn_primary btn_add" target="_blank"
                                       href="/cgi-bin/appmsg?t=media/videomsg_edit&amp;action=video_edit&amp;type=15&amp;lang=zh_CN&amp;token=2068590316">
                                        <i class="icon14_common add_white"></i>新建视频</a>
                                </div>
                            </div>
                            <div class="js_video_status js_video_content dn" style="display: block;">
                                <div class="richvideo_list media_dialog" id="js_videomsg_list">
                                    <div class="richvideo_col">
                                        <div class="inner">
                                            <template v-for="(item,index) in evenNumbersNews">
                                                <div>
                                                    <div @click="selectedVal = item.resourceId"
                                                         :class="{selected:selectedVal == item.resourceId}"
                                                         class="richvideo with_msg_box Js_videomsg" data-original="0"
                                                         data-vid="i13124ao95x">
                                                        <div class="richvideo_content" style="z-index: 0">
                                                            <h4 class="title" v-text="item.title"></h4>
                                                            <div class="video_info">
                                                                <em class="time">{{item.duration|formatSeconds}}</em>
                                                                <em class="res"></em>
                                                            </div>
                                                            <div class="video_extra_info" data-seq="0">
                                                                <img class="video_thumb" :src="item.coverImage" alt="">
                                                                <span class="video_length">{{item.duration|formatSeconds}}</span>
                                                                <div class="play_mask">
                                                                    <i class="icon_video_play"></i>
                                                                    <span class="vm_box"></span>
                                                                </div>
                                                            </div>
                                                            <div class="video_desc">{{item.title}}</div>
                                                        </div>
                                                        <div class="richvideo_mask"></div>
                                                        <i class="icon_card_selected">已选择</i>
                                                    </div>
                                                    <div class="richvideo_msg_box">
                                                        <p class="mini_tips warn" style="display: none;">
                                                            该视频由于版权问题无法在微信中播放
                                                        </p>
                                                    </div>
                                                </div>
                                            </template>

                                        </div>
                                    </div>
                                    &nbsp;
                                    <div class="richvideo_col">
                                        <div class="inner">
                                            <template v-for="(item,index) in oddNumbersNews">
                                                <div>
                                                    <div @click="selectedVal = item.resourceId"
                                                         :class="{selected:selectedVal == item.resourceId}"
                                                         class="richvideo with_msg_box Js_videomsg" data-original="0"
                                                         data-vid="i13124ao95x">
                                                        <div class="richvideo_content" style="z-index: 0">
                                                            <h4 class="title" v-text="item.title"></h4>
                                                            <div class="video_info">
                                                                <em class="time">{{item.duration|formatSeconds}}</em>
                                                                <em class="res"></em>
                                                            </div>
                                                            <div class="video_extra_info" data-seq="0">
                                                                <img class="video_thumb" :src="item.coverImage" alt="">
                                                                <span class="video_length">{{item.duration|formatSeconds}}</span>
                                                                <div class="play_mask">
                                                                    <i class="icon_video_play"></i>
                                                                    <span class="vm_box"></span>
                                                                </div>
                                                            </div>
                                                            <div class="video_desc">{{item.title}}</div>
                                                        </div>
                                                        <div class="richvideo_mask"></div>
                                                        <i class="icon_card_selected">已选择</i>
                                                    </div>
                                                    <div class="richvideo_msg_box">
                                                        <p class="mini_tips warn" style="display: none;">
                                                            该视频由于版权问题无法在微信中播放
                                                        </p>
                                                    </div>
                                                </div>
                                            </template>


                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="js_video_status js_video_tencent link_search_video_box dn js_video_search">
                                <div class="video">
                                    <div class="frm_control_group">
                                        <label class="frm_label">视频/图文网址</label>
                                        <div class="frm_controls">
                    <span class="frm_input_box">
                        <input type="text" class="frm_input js_video_txurl js_video_url"
                               placeholder="支持插入微信公众号文章链接、视频详情页链接和腾讯视频链接">
                    </span>
                                            <p class="frm_msg fail js_video_url_tip">只支持已发布的微信公众号链接、视频详情页链接和腾讯视频链接</p>
                                        </div>
                                    </div>
                                    <!-- <div class="video_preview js_video_preview"></div> -->
                                    <!-- 原来的js_video_preview去掉改成和素材库、小视频一样的方式通过richvideo_list插入视频@lulu -->
                                </div>
                                <div class="richvideo_list media_dialog" id="js_video_search_list">
                                    <div class="richvideo_col">
                                        <div class="inner"></div>
                                    </div><!-- 这里能否控制如果是腾讯视频的链接则只显示一个richvideo_col，如需支持多视频才显示两个richvideo_col？@lulu
            肯定可以啊！ @radeonwu -->
                                    <div class="richvideo_col">
                                        <div class="inner"></div>
                                    </div>
                                    <!--<div class="pagination_wrp pageNavigator js_video_tencent_pagebar"></div>-->
                                    <!-- 如果有多视频的情况下才显示分页，视频搜索这里用单独的分页组件，不要使用外面的分页（js_pagebar） @lulu-->
                                    <!--图文消息最多出现3个视频，这里不需要分页 @radeonwu-->
                                </div>
                            </div>
                            <div class="js_video_status js_video_loading" style="display: none;">
                                <i class="icon_loading_small white">loading...</i>
                            </div>
                            <div class="js_video_status js_video_none dn">
                                <div class="no_media_wrp">
                                    <p class="empty_tips js_empty_tips"></p>
                                </div>
                                <span class="vm_box"></span>
                            </div>
                            <div class="pagination_wrp pageNavigator js_pagebar">
                                <div class="pagination" id="wxPagebar_1484790292864">
                                    <span class="page_nav_area">

                                    <a href="javascript:void(0);" class="btn page_prev" @click="gotoNextPage"><i  class="arrow"></i></a>
                                    <span class="page_num">
                                        <label v-text="currentPageIndex"></label><span class="num_gap">/</span><label v-text="pagecount"></label>
                                    </span>
                                        <a href="javascript:void(0);" class="btn page_next" @click="gotoPrevPage"><i class="arrow"></i></a>

                                    </span>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="dialog_ft">
                        <span class="btn btn_primary btn_input js_btn_p">
                            <button type="button"

                                    class="js_btn" @click="confirmSelection" data-index="0">确定</button>
                        </span>
                        <span class="btn btn_default btn_input js_btn_p">
                            <button @click="$emit('close')" type="button"
                                                                                 class="js_btn"
                                                                                 data-index="1">取消</button></span>
                    </div>

                </div>
            </div>

        </div>
    </transition>
</script>

<!-- app -->
<div id="app">
    <button id="show-modal-pic" @click="showModal = true ; datatype =2">选择图片素材</button>
    <button id="show-modal-audio" @click="showModal = true ; datatype =3">选择声音素材</button>
    <button id="show-modal-news" @click="showModal = true ; datatype =10">选择图文素材</button>
    <button id="show-modal-video" @click="showModal = true ; datatype =15">选择视频素材</button>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal"
           @close="showModal = false"
           @confirm="confirmSelectX"
           :datatype="datatype"
    >
    </modal>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>

    Vue.filter('formatSeconds', function (value) {
        var theTime = parseInt(value);// 秒
        var theTime1 = 0;// 分
        var theTime2 = 0;// 小时
        if (theTime > 60) {
            theTime1 = parseInt(theTime / 60);
            theTime = parseInt(theTime % 60);
            if (theTime1 > 60) {
                theTime2 = parseInt(theTime1 / 60);
                theTime1 = parseInt(theTime1 % 60);
            }
        }
        var result = "" + parseInt(theTime) + "";
        if (theTime1 > 0) {
            result = "" + parseInt(theTime1) + ":" + result;
        }
        if (theTime2 > 0) {
            result = "" + parseInt(theTime2) + ":" + result;
        }
        return result;
    });
    Vue.component('modal', {
        template: '#modal-template',
        props: ["datatype"],
        data: function () {
            return {
                selectedVal: -1,
                keyword: '',
                datatypeVal: this.datatype,
                data: [],
                totaldatacount:-1,
                selectedgroup: -1,
                currentPageIndex: 1,
                groups: [],
                datasourceurl: {
                    10: {
                        url: './servers/news.php',
                        rows: 10
                    },
                    2: {
                        url: './servers/pic.php',
                        rows: 10
                    },
                    3: {
                        url: './servers/audio.php',
                        rows: 10
                    },
                    15: {
                        url:'./servers/video.php',
                        rows:10
                    }
                }
            }
        },
        computed: {
            evenNumbersNews: function () {
                return this.data.filter(function (item, index) {
                    return index % 2 === 0
                })
            },
            oddNumbersNews: function () {
                return this.data.filter(function (item, index) {
                    return index % 2 !== 0
                })
            },
            pagecount: function () {
                var _s=this;
                var _rows = _s.datasourceurl[_s.datatype].rows;
               var _tmpPageCount =  Math.floor(this.totaldatacount / _rows);
               var _assistent= this.totaldatacount % _rows;
               if(_assistent !=0){
                    return ++_tmpPageCount;
               }else{
                   return _tmpPageCount;
               }

            }
        },
        methods: {
            changePicGroup: function (gid) {
                var _s = this;
                _s.selectedgroup = gid;
                console.log(gid);
                _s.selectedVal = -1;
            },
            confirmSelection: function () {
                if (this.selectedVal < 0) { //当前没有那啥
                    return;
                }
                this.$emit("confirm", this.selectedVal);
                this.$emit('close');

            },
            searchNews: function () {
                var _s=this;

                console.log(_s.keyword);
                var paras = {
                    method: 'POST',
                    url: _s.datasourceurl[_s.datatypeVal].url,
                    data:{
                        rows: _s.datasourceurl[_s.datatypeVal].rows,
                        page: 1,
                        category:"material",
                        type :"image",
                        groupid:_s.selectedgroup,
                        keyword: _s.keyword
                    }


                };
                _s.getdata(paras);
            },
            loaddata: function () {
                var _s = this;
                var paras = {
                    method: 'POST',
                    url: _s.datasourceurl[_s.datatypeVal].url


                };
               // paras.headers={"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"};
                paras.data={
                    page:1,
                    rows: _s.datasourceurl[_s.datatypeVal].rows
                };
                switch (_s.datatypeVal) {
                    case 10:
                        //console.log("此为图文类型");
                        _s.getdata(paras);
                        break;
                    case 2:
                        //console.log("此为图片类型");
                        paras.data.category = "material";
                        paras.data.type = "image";
                        paras.data.groupid = 1;
                        _s.loadgroup(paras);
                        break;
                    case 15:
                        //console.log("视频类素材");
                        _s.loadgroup(paras);
                        break;
                    case 3:
                        //console.log("声音类素材");
                        _s.getdata(paras);
                        break;
                    default:
                        console.log("未注册类型");
                }

            },
            getdata: function (opt) {
                var _s = this;

                axios(opt).then(function (response) {
                    if (response.status != 200) {
                        console.log(response.statusText);
                        return;
                    }
                    _s.data = response.data.rows;
                    _s.totaldatacount = response.data.total;

                }).catch(function (error) {
                    console.log(error);
                });

            },
            loadgroup: function (paras) {
                var _s = this;
                axios({
                    url: "servers/groups.php",
                    method: 'get'
                }).then(function (response) {
                    if (response.status != 200) {
                        console.log(response.statusText);
                        return;
                    }
                    _s.groups = response.data.rows;
                }).then(function () {

                    _s.getdata(paras);

                }).catch(function (error) {
                    console.log(error);
                });

            },
            gotoNextPage:function(){
                    var _s=this;
                    if(_s.currentPageIndex>= _s.pagecount){return;}
                    _s.currentPageIndex++;
            },
            gotoPrevPage:function(){
                    var _s=this;
                    if(_s.currentPageIndex <=1){return;}
                    _s.currentPageIndex--;
            }
        },
        watch: {
            selectedgroup: function (val) {
                var _s=this;
                var paras = {
                    method: 'POST',
                    data:{
                        rows: _s.datasourceurl[_s.datatypeVal].rows,
                        page: 1,
                        category:"material",
                        type :"image",
                        groupid:val
                    },
                    url: _s.datasourceurl[_s.datatypeVal].url
                };
                _s.getdata(paras);



            },
            currentPageIndex:function(val){
                var _s=this;
                var paras = {
                    method: 'POST',
                    url: _s.datasourceurl[_s.datatypeVal].url,
                    rows: _s.datasourceurl[_s.datatypeVal].rows,
                    page: val,
                    category:"material",
                    type :"image",
                    groupid:_s.selectedgroup
                };
                if(_s.datatypeVal == 3){
                    paras.category = "material";
                    paras.type="image";
                }
                _s.getdata(paras);

            }
        },
        mounted: function (a, b, c) {
            var _s = this;
            //加载数据
            _s.loaddata();

        }
    });

    // start app
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                datatype: -1,
                showModal: false,
                selectedmediaid: ''
            };
        },
        methods: {


            confirmSelectX: function (mid) {
                var _s = this;
                _s.selectedmediaid = mid;
                _s.showModal = false;
                console.log("当前选中资源ID:", mid);
            }
        },
        watch: {}
    });

</script>
</body>
</html>